<template>
  <div>
    <div style="width:20%">
      <h3>考试时间设置</h3>
      <Divider style="height: 2px;margin:15px 0;display: inline-block;" />
    </div>
    <div style="width:80%">
      <h4 style="float: left">考试时间设置表格：</h4>
      <Button id="b1" @click="exit()">退出</Button>
      <Divider style="height: 2px;margin:15px 0;display: inline-block;" />
    </div>
    <Form style="width: 60%;" ref="formDate" :model="formDate" :rules="ruleDate" :label-width="120">
        <br><br><br><b id="text" style="font-size: 1rem;"></b><br><br><br><br>
        <FormItem label="时间编码" prop="edTimecode">
          <Input v-model="formDate.edTimecode"></Input>
        </FormItem>
        <FormItem label="考试日期" prop="edExamdate">
          <DatePicker type="date" v-model="formDate.edExamdate"></DatePicker>
        </FormItem>
        <FormItem label="开始时间和结束时间">
            <Row>
                <Col span="11">
                    <FormItem prop="edStarttime">
                        <TimePicker type="time" placeholder="开始时间" v-model="formDate.edStarttime"></TimePicker>
                    </FormItem>
                </Col>
                <Col span="2" style="text-align: center">-----</Col>
                <Col span="11">
                    <FormItem prop="edEndtime">
                        <TimePicker type="time" placeholder="结束时间" v-model="formDate.edEndtime"></TimePicker>
                    </FormItem>
                </Col>
            </Row>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formDate')">保存编辑</Button>
        </FormItem>
    </Form>
  </div>
</template>

<script>
  export default{
    data() {
      return {
        formDate: {
          edTimecode: '',
          edExamdate: '',
          edStarttime: '',
          edEndtime: ''
        },
        ruleDate: {
          edTimecode: [{
            required: true, message: '时间编码不能为空', trigger: 'blur',
          }],
          edExamdate: [{
            required: true, type: 'date', message: '日期不能为空', trigger: 'change',
          }],
          edStarttime: [{
            required: true, type: 'string', message: '开始时间不能为空', trigger: 'change',
          }],
          edEndtime: [{
            required: true, type: 'string', message: '结束时间不能为空', trigger: 'change',
          }]
        },
        Examination: [],
        esId: '0'
      }
    },
    created(){
      this.getParams()
      this.$axios.get(this.$host + '/examination/management/ExamDate?esId=' + this.esId).then(res => {
        console.log(res)
        this.formDate.edTimecode = res.data.data.edTimecode
        this.formDate.edExamdate = res.data.data.edExamdate
        this.formDate.edStarttime = res.data.data.edStarttime
        this.formDate.edEndtime = res.data.data.edEndtime
        document.getElementById("text").innerHTML = "考次编码：" + this.esId
      })
    },
    watch:{
      '$route': 'getParams'
    },
    methods: {
      getParams () {
        this.esId = this.$route.query.esId
      },
      handleSubmit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$axios.post(this.$host + '/examination/management/NewExamDate', {
              edTimecode: this.formDate.edTimecode,
              edExamdate: this.formDate.edExamdate,
              edStarttime: this.formDate.edStarttime,
              edEndtime: this.formDate.edEndtime,
			  esId: this.esId
            }).then( res => {
              console.log(res)
              if(res.data.message == '更新考试日期成功') {
                this.$Message.success('编辑考试时间成功!');
                this.$router.push({
                  name: 'ExaminationList'
                })
              }
            })
          } else {
            this.$Message.error('编辑失败!');
            }
        })
      },
      exit () {
        this.$router.push({
          name: 'ExaminationList'
        })
      }
    }
  }
</script>

<style scoped>
  h3 {font-size: 1.75rem;float: left;}
  #b1 {float: right;background-color: burlywood;}
</style>
